﻿<UserControl x:Class="FacebookClient.SearchAndFilterControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:FacebookClient="clr-namespace:FacebookClient" 
    xmlns:ClientManager="clr-namespace:ClientManager" 
    xmlns:ClientManagerControls="clr-namespace:ClientManager.Controls" 
    xmlns:Facebook="clr-namespace:Contigo;assembly=Contigo" 
    Focusable="False" 
    x:Name="TopControl">
  <UserControl.Resources>
    <FacebookClient:CollapseWhenZeroConverter x:Key="CollapseWhenZeroConverter"/>

    <Style x:Key="SearchAndFilterTabControlStyle" TargetType="{x:Type TabControl}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="TabControl">
            <StackPanel IsItemsHost="True" />
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Setter Property="ItemContainerStyle">
        <Setter.Value>
          <Style TargetType="TabItem">
            <Setter Property="Template">
              <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                  <Grid Height="31">
                    <Border x:Name="selected" Opacity="0" Background="{DynamicResource FilterButtonSelectedBrush}" BorderBrush="{DynamicResource FilterBorderBrush}" BorderThickness="0,1,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />
                    <Border x:Name="hover"    Opacity="0" Background="{DynamicResource FilterButtonSelectedBrush}" BorderBrush="{DynamicResource FilterBorderBrush}" BorderThickness="0,1,0,1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SnapsToDevicePixels="True" />

                    <Rectangle Fill="{DynamicResource FilterButtonDivider1}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height=".5" SnapsToDevicePixels="True" />
                    <Rectangle Fill="{DynamicResource FilterButtonDivider2}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height=".5" SnapsToDevicePixels="True" />

                    <ClientManagerControls:FacebookImageControl FacebookImage="{Binding Path=Icon}" FacebookImageDimensions="Normal">
                      <ClientManagerControls:FacebookImageControl.Template>
                        <ControlTemplate TargetType="{x:Type ClientManagerControls:FacebookImageControl}">
                          <Image Width="16" Height="16" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ImageSource}" />
                        </ControlTemplate>
                      </ClientManagerControls:FacebookImageControl.Template>
                    </ClientManagerControls:FacebookImageControl>

                    <TextBlock x:Name="text"  Foreground="{DynamicResource FilterItemTextBrush}" FontSize="{DynamicResource MiddleFontSize}" FontWeight="Light" FontFamily="{DynamicResource SansSerifFont}" Text="{Binding Name}" Margin="37,0,5,0" VerticalAlignment="Center" TextTrimming="CharacterEllipsis" />

                    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="Button_Click" Command="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=ActionCommands.SetNewsFeedFilterCommand}" CommandParameter="{Binding}">
                      <Button.Template>
                        <ControlTemplate>
                          <Grid Background="Transparent" />
                        </ControlTemplate>
                      </Button.Template>
                    </Button>
                  </Grid>

                  <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation To=".5" Duration="0:0:0.3" Storyboard.TargetName="hover" Storyboard.TargetProperty="Opacity" />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                      <EventTrigger.Actions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation To="0" Duration="0:0:0.4" Storyboard.TargetName="hover" Storyboard.TargetProperty="Opacity" />
                          </Storyboard>
                        </BeginStoryboard>
                      </EventTrigger.Actions>
                    </EventTrigger>
                    <DataTrigger Binding="{Binding IsVisible}" Value="False">
                      <Setter Property="Visibility" Value="Collapsed" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type FacebookClient:SearchAndFilterControl}}, Path=ShowMore}" Value="True">
                      <Setter Property="Visibility" Value="Visible" />
                    </DataTrigger>
                    <Trigger Property="IsSelected" Value="true">
                      <Trigger.EnterActions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation To="1" Duration="0:0:0.3" Storyboard.TargetName="selected" Storyboard.TargetProperty="Opacity" />
                            <ColorAnimation To="#FFFFFF" Duration="0:0:0.1" Storyboard.TargetName="text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" />
                          </Storyboard>
                        </BeginStoryboard>
                      </Trigger.EnterActions>
                      <Trigger.ExitActions>
                        <BeginStoryboard>
                          <Storyboard>
                            <DoubleAnimation To="0" Duration="0:0:0.4" Storyboard.TargetName="selected" Storyboard.TargetProperty="Opacity" />
                            <ColorAnimation To="{x:Null}" Duration="0:0:0.1" Storyboard.TargetName="text" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" />
                          </Storyboard>
                        </BeginStoryboard>
                      </Trigger.ExitActions>
                    </Trigger>
                  </ControlTemplate.Triggers>
                </ControlTemplate>
              </Setter.Value>
            </Setter>
          </Style>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>

  <Border
      Background="{DynamicResource FilterControlBorderBackgroundBrush}"
      BorderBrush="{DynamicResource FilterControlBorderBrush}"
      BorderThickness="0,0,1,0">
    <DockPanel LastChildFill="False">
      <TextBlock 
          DockPanel.Dock="Top" 
          Foreground="{DynamicResource SearchAndFilterHeader}" 
          FontSize="{DynamicResource LargeFontSize1}" 
          FontWeight="Bold" 
          FontFamily="{DynamicResource SansSerifFont}" 
          Text="Facebook Feeds" 
          Margin="10,17,0,0" />

      <Button 
          DockPanel.Dock="Bottom" 
          Margin="10"
          Height="22"  
          HorizontalAlignment="Right" 
          VerticalAlignment="Top" 
          Click="MoreButtonClick"
          Style="{DynamicResource StandardButtonStyle}"
          Visibility="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=NewsFeedFilters.Count, Converter={StaticResource CollapseWhenZeroConverter}}">
        <TextBlock>
          <TextBlock.Style>
            <Style TargetType="{x:Type TextBlock}">
              <Setter Property="Text" Value="More"/>
              <Style.Triggers>
                <DataTrigger Binding="{Binding ShowMore, ElementName=TopControl}" Value="True">
                  <Setter Property="Text" Value="Less" />
                </DataTrigger>
              </Style.Triggers>
            </Style>
          </TextBlock.Style>
        </TextBlock>
      </Button>

      <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch">
        <TabControl 
          x:Name="FilterTabs" 
          Margin="0,6,0,0"
          VerticalAlignment="Top" 
          ItemsSource="{Binding Source={x:Static ClientManager:ServiceProvider.ViewManager}, Path=NewsFeedFilters}" 
          Style="{DynamicResource SearchAndFilterTabControlStyle}" />
      </ScrollViewer>

    </DockPanel>
  </Border>
</UserControl>
